<template>
  <div>
    <div class="title_box mt-30">
      <p class="title">资质信息</p>
      <div class="line"></div>
    </div>

    <div class="mt-16">
      <a-table :columns="qualiInfo" :data-source="qualiData" :pagination="qualipagination"
        :rowKey="(record) => record.id">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="certSummary" slot-scope="text,record">
          <a @click="ZZDetails(record)" style="margin-right:32px">详情</a>
        </span>
      </a-table>
    </div>
    <QualificationsDetail :ZZDetailsshow="ZZDetailsshow" :ZZList="ZZList" @close="closeDetail" />
  </div>
</template>

<script>
import {
  getEntZZPageList, getEntCertById
} from "@/apis/EntBase";
import { getClientUseQualificantionList } from '@/apis/com/qualification'
import QualificationsDetail from './QualificationsDetail.vue'
export default {
  components: {
    QualificationsDetail
  },
  data () {

    return {
      ZZDetailsshow: false,
      ZZList: {},
      qualipagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.qualionSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.qualionPageChange(page, pageSize),
      },
      qualiData: [],
      qualiInfo: [
        {
          dataIndex: "type",
          title: "证书类型",
          customRender: function (text) {
            if (text == 1) {
              return "资质";
            } else if (text == 2) {
              return "荣誉";
            }
          },
        },
        {
          dataIndex: "name",
          title: "证书名称",
        },
        {
          dataIndex: "code",
          title: "证书编号",
        },
        {
          dataIndex: "issueDate",
          title: "发证日期",
        },
        {
          dataIndex: "certSummary",
          title: "内容",
          scopedSlots: { customRender: "certSummary" }
        },
      ]
    }
  },
  mounted () {
    this.getEntZZPageList()
  },
  methods: {
    // 资质信息  当前页码
    qualionSizeChange (page, pageSize) {
      this.qualipagination.pageSize = pageSize;
      this.getEntZZPageList();
    },
    // 资质信息   每页条数
    qualionPageChange (current, pageSize) {
      this.qualipagination.current = current;
      this.getEntZZPageList();
    },
    //资质列表
    getEntZZPageList () {
      let _params = {
        pageNum: this.qualipagination.current,
        companyId: this.$route.query.id,
        pageSize: this.qualipagination.pageSize,
        approvalSt: 1,
        type: 1
      };
      getClientUseQualificantionList(_params)
        .then((res) => {
          console.log("资质列表");
          console.log(res);
          if (res.code == 200) {
            this.qualiData = res.rows;
            this.qualipagination.total = res.total;
          }
        })
        .catch((error) => { });
    },

    ZZDetails (row) {
      this.ZZDetailsshow = true
      this.ZZList = row
    },

    closeDetail () {
      this.ZZDetailsshow = false
      this.ZZList = []
    },

    //获取资质详情
    getEntCertById (id) {
      let _params = {
        id
      }
      getEntCertById(_params).then(res => {
        if (res.code == 200) {
          this.ZZList = res.data
        }
      })
    },
  }
}

</script>

<style lang="less" scoped>
.title_box {
  border-bottom: solid 1px #ebeef5;

  .title {
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 0px;
    color: #303133;
  }

  .line {
    width: 20px;
    height: 4px;
    background-color: #188af1;
    margin-top: 8px;
  }
}
</style>